.mine_vip_wrap {
  // padding-top: 16px;
  font-family: 'PingFang SC';
  background:
    url('../../images/vip_board.png') no-repeat 192px 70px,
    url('../../images/vip_info_bg.png') no-repeat;
  background-size:
    166px 166px,
    contain;
  height: 100vh;
  overflow: hidden;

  .mine_vip_content {
    // width: 343px;
    margin: 0 auto;
    color: #fff;
  }
  .mine_vip_card {
    width: 343px;
    height: 93px;
    background: url('../../images/uPic//un_vip_bg.png') no-repeat;
    background-size: contain;
    // margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    padding: 24px 15px 0 15px;
    margin-bottom: 24px;

    &.isVip {
      // box-shadow: 0px 7px 18px rgba(162, 95, 228, 0.51);
      background: url('../../images/uPic/vip_bg.png') no-repeat;
      background-size: cover;
    }

    .user_info {
      display: flex;
      .avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 8px;
        border: 2px solid #ffffff;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .name_info {
        .nickname {
          height: 24px;
          line-height: 24px;
          color: #fff;
          font-size: 14px;
          font-weight: 500;
          padding-bottom: 2px;
        }
        .vip_status_text {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.6);
          transform: scale(0.9);
          margin-left: -8px;
        }
      }
    }

    .un_pay_tips {
      text-align: center;
      opacity: 0.6;
      margin-top: 20px;
      transform: scale(0.86);
      line-height: 24px;
      font-weight: 400;
    }
  }

  .vip_privilege {
    margin-top: 21px;
    .privilege_tit {
      text-align: center;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      height: 24px;
      margin-bottom: 8px;
    }
    .privileges {
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      .privilege_item {
        box-sizing: border-box;
        // padding: 0 12px;
        width: 78px;
        height: 98px;
        color: #fff;
        text-align: center;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        .privilege_item_icon {
          width: 34px;
          height: 34px;
          margin: 8px auto 0;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .privilege_item_t {
          font-size: 12px;
          font-weight: 500;
          margin: 2px 0;
        }
        .privilege_item_text {
          font-size: 12px;
          transform: scale(0.84);
          font-weight: 400;
          color: rgba(255, 255, 255, 0.56);
          line-height: 16px;
        }
        &.a {
          background: url('../../images/privilege_bg1.png') no-repeat;
          background-size: contain;
          padding: 0 12px;
          // .privilege_item_icon {
          //     background: url('../../images/privilege_icon1.png') no-repeat;
          //     background-size: contain;
          // }
        }
        &.b {
          background: url('../../images/privilege_bg2.png') no-repeat;
          background-size: contain;
          // .privilege_item_icon {
          //     background: url('../../images/privilege_icon2.png') no-repeat;
          //     background-size: contain;
          // }
        }
        &.c {
          background: url('../../images/privilege_bg3.png') no-repeat;
          background-size: contain;
        }
        &.d {
          background: url('../../images/privilege_bg4.png') no-repeat;
          background-size: contain;
        }
      }
    }
  }

  .vip_menu {
    padding-top: 24px;
    .vip_menu_tit {
      font-size: 16px;
      font-weight: 500;
      // line-height: 24px;
      // height: 24px;
      margin-bottom: 8px;
      text-align: center;
    }
    .vip_menu_content {
      display: flex;
      .pay_item {
        width: 102px;
        height: 129px;
        border-radius: 20px;
        background: rgba(255, 172, 48, 0.1);
        // background: url('../../images/vip_un_pay.png') no-repeat;
        // background-size: contain;
        text-align: center;
        margin-right: 19px;
        box-sizing: border-box;
        &.active {
          // border-radius: 20px;
          // border: 4px solid var(--unnamed, #FFAC30);
          background: url('../../images/vip_select.png') no-repeat;
          background-size: contain;
          .pay_price {
            color: #ffac30;
          }
        }
        &:last-of-type {
          margin-right: 0;
        }
        .pay_t {
          margin-top: 25px;
          font-size: 14px;
          height: 24px;
          line-height: 24px;
        }
        .pay_price {
          margin: 7px 0 13px 0;
          font-size: 32px;
          font-weight: 500;
          color: #fff;
          span {
            font-size: 14px;
          }
        }
        .pay_aver {
          font-size: 14px;
          height: 24px;
          // line-height: 24px;
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }
    .pay_tips {
      margin: 12px 0;
      height: 24px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.6);
      span {
        color: #affba1;
      }
    }
  }

  .pay_way_wrap {
    // height: 50px;
    // background: url('../../images/vip_payway_bg.png') no-repeat;
    // background-size: contain;
    // display: flex;
    // align-items: center;
    .content,
    .items {
      flex: 1;
      display: flex;
      align-items: center;
      font-size: 12px;
    }
    p {
      padding-right: 130px;
    }
    .pay_item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      .text {
        font-size: 12px;
        line-height: 1;
      }
      .circle {
        width: 12px;
        height: 12px;
        background: url('../../images/un_circle1.png') no-repeat;
        background-size: contain;
        margin-right: 4px;
        &.active {
          background: url('../../images/select_circle1.png') no-repeat;
          background-size: contain;
        }
      }
      // .icon {
      //     width: 14px;
      //     height: 14px;
      //     margin: 0 4px 0 11px;
      //     &.wechat {
      //         background: url('../../images/green_wechat.png') no-repeat;
      //         background-size: contain;
      //     }
      //     &.ali {
      //         background: url('../../images/green_ali.png') no-repeat;
      //         background-size: contain;
      //     }
      // }
    }
  }

  .pay_info {
    margin: 30px 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    .econ_money {
      padding-top: 15px;
      font-size: 12px;
      span {
        font-size: 20px;
        font-weight: 500;
      }
    }
    .pay_btn_cotent {
      width: 250px;
      .pay_btn {
        margin-left: 10px;
        width: 237px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background: url('../../images/pay_btn.png') no-repeat;
        background-size: contain;
        font-size: 14px;
        color: black;
        font-weight: 500;
        span {
          font-size: 32px;
          padding: 2px 4px;
        }
      }
      .pay-tip {
        padding-top: 6px;
        height: 24px;
        text-align: center;
        font-size: 11px;
        // transform: scale(.9);
        zoom: 0.85;
        span {
          color: #caed6d;
        }
      }
    }
  }

  // 新版
  .pay_button {
    width: 243px;
    height: 48px;
    background: #ffac30;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 14px 0px rgba(255, 172, 48, 0.3);

    position: fixed;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
  }
  .new_user_info {
    width: 343px;
    margin: 60px auto 35px;
    .nickname {
      font-size: 18px;
      color: #fff;
      line-height: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      .icon {
        margin-left: 4px;
        width: 18px;
        height: 16px;
        background: url('../../images/v_icon.png') no-repeat;
        background-size: contain;
        transform: scale(0.9);
      }
    }
    .vip_status_text {
      // font-size-adjust: .5;
      font-size: 10px;
      padding-top: 6px;
      opacity: 0.6;
      // transform: scale(.95);
      zoom: 0.95;
    }
  }
  .vip_content {
    background: black;
    border-radius: 30px 30px 0 0;
    height: 100vh;
    box-sizing: border-box;
    padding: 0 12px;
  }
}
